<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>list-style</title>

   <style>
      #ul_style {
         /*列表项类型*/
         /*list-style-type: circle;*/
         /*列表项图标*/
         list-style-image: url("img/mm.png");
         /*列表项在li外边*/
         list-style-position: outside;
         list-style-position: inside;
         /*列表项在li里边*/
         margin-left: 20px;
         /*list-style:none;*/
         /*去除列表项*/
      }

      /**{margin: 0; padding: 0;}*/
      .ul_test {
         list-style: none;
         width: 1004px;
         height: 82px;
         background-color: #f5f5f5;
         margin: 0 auto;
         padding: 0;
      }

      .ul_test>li {
         list-style: none;
         width: 65px;
         height: 80px;
         margin-left: 93px;
         margin-right: 93px;
         padding: 0px;
         float: left;
      }

      .ul_test p {
         width: 65px;
         height: 16px;
         color: #333333;
         font-size: 12px;
         text-align: center;
         margin: 0;
         padding: 0;
      }
   </style>
</head>

<body>
   <ul id="ul_style">
      <li>鱼香肉丝</li>
      <li>锅包肉</li>
      <li>宫保鸡丁</li>
      <li>京酱肉丝</li>
      <li>烤鸭</li>
   </ul>

   <hr>

   <ul class="ul_test">
      <li>
         <img src="img/icon1.png" alt="">
         <p>品质保障</p>
      </li>
      <li>
         <img src="img/icon2.png" alt="">
         <p>私人订制</p>
      </li>
      <li>
         <img src="img/icon3.png" alt="">
         <p>专属特权</p>
      </li>
      <li>
         <img src="img/icon4.png" alt="">
         <p>学员特供</p>
      </li>
   </ul>











</body>

</html>